import React from 'react'

import Tabbar from '@/components/common/Tabbar.js'

const Index = () => {

    // 获取cookie
    let Cookie = React.$Cookies.load('LoginUser',{path:'/'}) ? JSON.parse(React.$Cookies.load('LoginUser',{path:'/'})) : {}

    // 设置状态数据
    const [LoginUser, setLoginUser] = React.useState(Cookie)
    const [LeaseCount,setLeaseCount] = React.useState(0)
    const [ProductCount,setProductCount] = React.useState(0)
    const [ArticleCount,setArticleCount] = React.useState(0)

    // 钩子函数初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // Hook函数
    React.useEffect(() => {
        Total()
    },[])

    // 退出登录
    const logout = () => {
        React.$Vant.Dialog.confirm({
            title: '退出提醒',
            message: '是否确认退出登录'
        }).then(() => {
            //删除cookie,并跳转到登录界面
            React.$Cookies.remove('LoginUser',{path:'/'})
            React.$LoginUser = {}

            //跳转到登录界面
            navigate('/user/base/login')
        }).catch(() => { })
    }

    // 请求数据的总数
    const Total = async () => {
        let data = {
            id:LoginUser.id
        }

        // 发起请求
        let result = await React.$Api.Home(data)

        if(result.code === 1)
        {
            setLeaseCount(result.data.LeaseCount)
            setProductCount(result.data.ProductCount)
            setArticleCount(result.data.ArticleCount)
        }
    }

    const Avatar = () => {
        if (LoginUser.avatar) {
            return (
                <img src={LoginUser.avatar_cdn} alt="" />
            )
        } else {
            return (
                <img src="/assets/images/toux.jpg" alt="" />
            )
        }
    }

    const NickName = () => {
        if (LoginUser.nickname) {
            return (
                <h2>{LoginUser.nickname}</h2>
            )
        } else if (LoginUser.mobile) {
            return (
                <h2>{LoginUser.mobile_text}</h2>
            )
        } else {
            return (
                <h2>请先登录</h2>
            )
        }
    }

    const Email = () => {
        // 未认证
        if (LoginUser.auth != 1) {
            return (
                <div className="my_dind">
                    <div className="bt">
                        <React.$Router.NavLink to="/user/base/ems">
                            <h3><img src="/assets/images/my_x_01.png" alt="" />邮箱认证</h3>
                            <div className="right">
                                <img src="/assets/images/right_jiant.png" alt="" />
                            </div>
                        </React.$Router.NavLink>
                    </div>
                </div>
            )
        } else {
            return (
                <></>
            )
        }
    }

    return (
        <>
            <div className="my_kuang">
                <div className="bj_img">
                    <img className="beij_s" src="/assets/images/my_beij.jpg" alt="" />
                    <div className="nimetou_gaib">
                        <div className="toux_hou">
                            <Avatar />
                        </div>
                        <div className="mingz">
                            <NickName />
                        </div>
                    </div>
                </div>
                <div className="div_bx_k">
                    <div className="neir_Ef">
                        <div className="yverjif">
                            <ul>
                                <li>
                                    <React.$Router.NavLink to="/category/category/collection">
                                        <h2>{ArticleCount}</h2>
                                        <p>收藏文章</p>
                                    </React.$Router.NavLink>
                                </li>
                                <li>
                                    <React.$Router.NavLink to="/product/product/collection">
                                        <h2>{ProductCount}</h2>
                                        <p>收藏商品</p>
                                    </React.$Router.NavLink>
                                </li>
                                <li>
                                    <React.$Router.NavLink to="/lease/lease/index">
                                        <h2>{LeaseCount}</h2>
                                        <p>租赁订单</p>
                                    </React.$Router.NavLink>
                                </li>
                            </ul>
                        </div>

                        {/* 菜单 */}
                        <div className="list_index_my">
                            <div className="fenh_ziyek">
                                <h3>更多服务</h3>
                            </div>

                            <div className="my_dind">
                                <div className="bt">
                                    <React.$Router.NavLink to="/user/base/profile">
                                        <h3><img src="/assets/images/my_x_01.png" alt="" />基本资料</h3>
                                        <div className="right">
                                            <img src="/assets/images/right_jiant.png" alt="" />
                                        </div>
                                    </React.$Router.NavLink>
                                </div>
                            </div>

                            {/* 邮箱认证 */}
                            <Email />

                            {/* <div className="my_dind">
                                <div className="bt">
                                    <React.$Router.NavLink to="/user/lease/index">
                                        <h3><img src="/assets/images/my_x_02.png" alt="" />我的订单</h3>
                                        <div className="right">
                                            <img src="/assets/images/right_jiant.png" alt="" />
                                        </div>
                                    </React.$Router.NavLink>
                                </div>
                            </div> */}
                            <div className="my_dind">
                                <div className="bt">
                                    <React.$Router.NavLink to="/about">
                                        <h3><img src="/assets/images/my_x_02.png" alt="" />关于我们</h3>
                                        <div className="right">
                                            <img src="/assets/images/right_jiant.png" alt="" />
                                        </div>
                                    </React.$Router.NavLink>
                                </div>
                            </div>
                            <div className="my_dind">
                                <div className="bt">
                                    <a onClick={logout}>
                                        <h3><img src="/assets/images/my_x_02.png" alt="" />退出登录</h3>
                                        <div className="right">
                                            <img src="/assets/images/right_jiant.png" alt="" />
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <Tabbar />
        </>
    )
}

export default Index